<!--
 * @Author: 谢小康 2170673706@qq.com
 * @Date: 2024-01-09 20:21:46
 * @LastEditors: 谢小康 2170673706@qq.com
 * @LastEditTime: 2024-01-24 20:31:53
 * @FilePath: \My-bolg\My_Blog\src\components\Recommendedarticles.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="right-boxitem Recommendedarticles">
        <h1>文章推荐</h1>
        <el-skeleton :loading="loading" animated v-for="item in datalist">
            <template #template>
                <articleRecomment></articleRecomment>
            </template>
            <template #default>
                <div class="Recommendedarticles-item" @click="toarticle(item)">
                    <div class="img-box">
                        <img :src="item.article_cover">
                    </div>
                    <div class="content">
                        <div class="text">
                            {{ item.article_title }}
                        </div>
                        <div class="foot">
                            {{ item.updatedAt }}
                        </div>
                    </div>
                </div>
            </template>
        </el-skeleton>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import articleRecomment from "@/components/SkeletonItem/articleRecomment.vue"
import { getrecommentdarticle } from "@/api/article.js"
import moment from 'moment';
import { useRouter } from 'vue-router';
let loading = ref(true)
let router = useRouter()
let datalist = ref([])
onMounted(async () => {
    let res = await getrecommentdarticle()
    if (res.data.status == 200) {
        datalist.value = res.data.data.map(item => {
            return {
                updatedAt: moment(item.updatedAt).format("YYYY-MM-DD"),
                id: item.id,
                article_cover: item.article_cover,
                article_title: item.article_title,
                article_description: item.article_description,
            }
        })
        loading.value = false
    }
})
function toarticle(data) {
    router.push({ path: '/article', query: { id: data.id } })
}
</script>

<style lang="scss" scoped>
.right-boxitem {
    width: 100%;
    border-radius: 15px;
    margin: 10px 0;
}

.Recommendedarticles {
    padding: 10px;

    @include userTheme {
        background-color: getThemeValue("rigthitemColor");
        font-family: getThemeValue("fontfamily");
    }

    cursor: pointer;

    h1 {
        font-size: $font-size-l;
    }

    .Recommendedarticles-item {

        margin-top: 5px;
        display: flex;
        justify-content: space-between;
        height: 50px;
        width: 100%;
        border-bottom: 1px dashed rgb(199, 109, 109);

        .img-box {
            height: 45px;
            width: 60px;

            img {
                height: 100%;
                width: 100%;
            }

            margin-left: 10px;
        }

        .content {

            width: 68%;

            .text {
                max-height: 39px;
                overflow: hidden;
                display: -webkit-box !important;
                -webkit-line-clamp: 2 !important;
                -webkit-box-orient: vertical !important;
                overflow: hidden !important;
                white-space: normal !important;
                word-wrap: break-word !important;
                word-break: break-all !important;
            }

            .foot {
                text-align: right;
                font-size: $font-size-s;
            }
        }
    }
}</style>